<template>
	<view class="uni_box home">
		<!-- <navbar :isback='false' :backgroundColor='Themecolor'>
			<view slot="left" class="hleft">
				服务中心
			</view>
		</navbar>
		
		 <view class="indexPage" :style="{paddingTop: titleTop + 'px'}">
			<view class="main-title" :style="{height: statusBarHeight+'px'}">
				99
			</view>
		</view>
		-->
		<view class="jli"  :style="{paddingTop: titleTop + 'px'}">
			<!-- <view class="immerse"></view> -->
			<text class="jname">奖励中心</text>
			<text class="yaojl">{{yaotxt.jiang_wen}}</text>
			<view class="yaonav">
				<image class="img_jlbj" :src="ossThree('/uploads/20250404/1817eea32541200ac5b167f63e0b6999.png')" />
				<view class="yitem">
					<view class="yione">
						<view class="yileft">
							<view class="yibt" @click="getqianbao">
								<text class="keti">可提现金额</text>
								<!-- <view class="tixian">提现</view> -->
								<image class="icon_ck" src="/static/img/icon_ck.png" />
							</view>
							<text class="yuan"><text class="yprice">{{count}}</text>元</text>
						</view>
						<view class="yileft">
							<view class="yibt" @click="getqianbao">
								<text class="keti">累计奖励收入</text>
								<image class="icon_ck" src="/static/img/icon_ck.png" />
							</view>
							<text class="yuan"><text class="yprice">{{jiang}}</text>元</text>
						</view>
					</view>
					<view class="yitwo">
						<view class="yileft" @click="getyao(1)">邀请员工</view>
						<view class="yileft" @click="getyao(2)">邀请老板</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="yaohead">
				<view class="yaoitem " :class="head==1?'yactive':''" @click="gethead(1)">
					<text class="ytit">邀请记录</text>
					<view class="heng"></view>
				</view>
				<view class="yaoitem" :class="head==2?'yactive':''" @click="gethead(2)">
					<text class="ytit">奖励记录</text>
					<view class="heng"></view>
				</view>
			</view>
			<view class="zt">
				<!-- <view class="ztitem" v-for="(item,index) in classlist" :key="index" :class="item.status==classinfo.status?'zactive':''" @click="getclasshead(item)">{{item.name}}</view> -->
				<view class="ztitem" :class="type==1?'zactive':''" @click="getclasshead(1)">员工</view>
				<view class="ztitem" :class="type==2?'zactive':''" @click="getclasshead(2)">老板</view>
			</view>
			<view class="list">
				<view class="item" v-for="(item,index) in list" :key="index">
					<!-- <image class="img_tx" :src="item.avatar" /> -->
					<view class="itemnav">
						<text class="sj">{{item.memo}}</text>
						<text class="sjian">{{item.createtime}}</text>
					</view>
					<text class="status wc">{{item.money}}</text>
				</view>
			</view>
			<u-loadmore :status="status" @loadmore="loadmore" />
		</view>

		<!-- 分享弹窗 -->
		<SharePop :shareshow="shareshow" @closeshare="shareshow=false" :yaotxt="yaotxt" :lei="lei"></SharePop>
</view>
</template>

<script>
import SharePop from '@/components/SharePop/SharePop'
export default {
	data() {
		return {
			enable: false,
			Captop: 0,
			offTop: 0,
			scrollLeft: 0,//滑动距离
			currentindex: 0,
			Themecolor:this.Themecolor,

			titleTop: 0,
 			statusBarHeight: 0,
			count:0,
			jiang:0,
			status:99,//99全部 0待完成 1已完成 2已失效
			classlist:[],
			classinfo:{},
			list: [],
			page: 1,
			limit: 10,
			last_page: 1,
			status: "loadmore",
			head:1,
			shareshow:false,
			yaotxt:{},
			lei:1,//1员工 2老板
			type:1,//1员工 2老板

		}
	},
	components: {
		SharePop
	},
	onShareAppMessage(res) {
		if (res.from === 'button') { // 来自页面内分享按钮
			console.log(res.target);
		}
		return {
			title: '牛牛日结',
			imageUrl:this.ossThree('/uploads/20250404/573dd121b664a0b0565b364c65a10f31.png'),
			path: '/pages/tabbar/index?invite_code='+this.$store.state.code||uni.getStorageSync('code')
		}
	},
	onShareTimeline(){
		return {
			title: '牛牛日结',
			imageUrl:this.ossThree('/uploads/20250404/573dd121b664a0b0565b364c65a10f31.png'),
			path: '/pages/tabbar/index?invite_code='+this.$store.state.code||uni.getStorageSync('code')
		}
	},
	mounted() {
		// //在mounted中调用是确保元素已被加载
		// //#ifdef MP-WEIXIN
		// //通过getMenuButtonBoundingClientRect 获取胶囊的高度宽度等信息
		// this.Cap = uni.getMenuButtonBoundingClientRect();

		// this.Captop = this.Cap.top / (uni.upx2px(100) / 100);
		// console.log(this.Captop)
		// //我们需要吸顶的位置 是计算出来的  胶囊的高度height+胶囊距离顶部状态栏的距离top
		// let CapHeight = (this.Cap.height + this.Cap.top);
		// //由于拿到的单位是px 通过uni自带的upx2px方法 将px转换为rpx 
		// //这样做是因为uView的Sticky组件要求传入的offset-top值单位是rpx
		// this.offTop = Number(CapHeight / (uni.upx2px(100) / 100))
		// //最后拿到想要的值并传入即可
		// console.log(this.offTop)
		// this.enable = true
		// //#endif
		// //#ifdef H5
		// this.offTop = 0
		// //最后拿到想要的值并传入即可
		// this.enable = true
		// //#endif

		// #ifdef MP-WEIXIN
		let that = this;
		// 获取胶囊按钮位置信息
		const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		const { top, height } = menuButtonInfo;
		const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;

		// 计算标题需要偏移的位置
		const titleTop = top + (height - statusBarHeight) / 2;
		this.titleTop = titleTop;//设置标题顶部距离
		this.statusBarHeight = statusBarHeight;//设置状态栏高度
		// #endif
		this.getclass()
	},
	computed: {
	},
	onLoad() {
		uni.showShareMenu({
			menus: ['shareAppMessage', 'shareTimeline'] // 显示分享到好友和朋友圈的菜单项
		});
	},
	onShow() {
		// this.getList()
		this.getinfo()
		this.getClear()
		this.getuser()
		this.yaogetInit()
	},
	onReachBottom: function () {
		this.loadmore();
	},
	methods: {
		async yaogetInit(){
			let res = await this.$u.api.yaogetInit({
			});
			this.yaotxt = res
		},
		gethead(e){
			this.head = e
			this.getClear()
		},
		async getclass(){
			let res = await this.$u.api.getCateByGongren({
			});
			this.classlist = res
			this.classinfo = res[0]
			this.getClear()
		},
		getclasshead(e){
			this.type = e
			this.getClear()
		},
		changeCate(index) {
			this.scrollLeft = 50 * (index - 1);
			this.currentindex = index
		},
		async getinfo(){
			let res = await this.$u.api.bgetData({
			});
			this.count = res.count
			this.jiang = res.jiang

		},
		async getuser(){
			let res = await this.$u.api.user({
			});
			if(res.data.code){//本地分享参数缓存
				uni.setStorageSync('code',res.data.code);//2老板
				this.$store.commit('changecode',res.data.code);
			}
		},
		async getList(){//列表数据
			let res;
			if(this.head == 1){
				if(this.type == 1){
					//邀请 员工
					res = await this.$u.api.getListByGongren({
						limit:this.limit,
						page:this.page
					});
				}else if(this.type == 2){
					res = await this.$u.api.getListByBoss({
						limit:this.limit,
						page:this.page
					});
				}
				
			}else if(this.head == 2){
				if(this.type == 1){
					//奖励 员工
					res = await this.$u.api.getJiangList({
						limit:this.limit,
						page:this.page,
						type:this.type
					});
				}else if(this.type == 2){
					res = await this.$u.api.getJiangList({
						limit:this.limit,
						page:this.page,
						type:this.type
					});
				}
			}
			let list = res.list;
			this.list = this.page == 1 ? list : [...this.list, ...list];	
			if(res.list==''||Number(list.length)<Number(this.limit)){
				this.status = 'nomore';
			}
			
		},
		getClear(){
			this.list = []
			this.page = 1,
			this.status= "loadmore"
			this.getList()
		},
		loadmore() {
			let page = this.page;
			// let last_page = this.last_page;
			if (this.status == 'loadmore') {
				this.page++;
				this.getList();
			}
		},
		getqianbao(){
			this.navrouter("/pages_client/twoPage/M-wallet");
		},
		getyao(e){
			this.lei = e
			this.shareshow = true
		}
	}
}
</script>

<style lang="scss" scoped>
page {
	background-color: #FAFAFA;
}

.main-title {
  /*必要 对齐胶囊按钮*/
  display: flex;
  align-items: center;
}
.content {
	padding-bottom: 120rpx;
	background: linear-gradient(0deg, #FFFFFF, #F6F7F9);
	border-radius: 30rpx 30rpx 0rpx 0rpx;
	margin-top: -40rpx;
	position: relative;
	.yaohead{
		display: flex;
		flex-direction: row;
		border-bottom: 1rpx solid rgba(238, 238, 238, 1);
		padding-bottom: 10rpx;
	}
	.yaoitem{
		flex: 1;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 15rpx 15rpx;
		.ytit{
			font-weight: 400;
			font-size: 30rpx;
			color: #999999;
		}
		.heng{
			width: 20%;
			position: absolute;
			left: 40%;
			bottom: 0;
			display: none;
			height: 6rpx;
			background: linear-gradient(90deg, #FF8F39, #FF4D43);
		}
	}
	.yactive{
		.ytit{
			color: #111111;
			font-weight: bold;
		}
		.heng{
			display: inline-block;
		}
	}
	.zt{
		display: flex;
		flex-direction: row;
		padding: 20rpx 30rpx;
		.ztitem{
			background: #EEEEEE;
			border-radius: 29rpx;
			padding: 7rpx 25rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #666666;
			margin-right: 20rpx;
		}
		.zactive{
			background: linear-gradient(90deg, #FF8F39, #FF4D43);
			color: #fff;
		}
		
	}
	.list{
		padding: 0 30rpx;
	}
	.item{
		padding: 30rpx 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-bottom: 1rpx solid rgba(238, 238, 238, 1);
		.img_tx{
			width: 88rpx;
			height: 88rpx;
			margin-right: 20rpx;
			border-radius: 50%;
		}
		.itemnav{
			display: flex;
			flex-direction: column;
			.sj{
				font-weight: bold;
				font-size: 36rpx;
				color: #111111;
			}
			.sjian{
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				display: block;
				margin-top: 10rpx;
			}
		}
		.status{
			margin-left: auto;
			font-weight: 400;
			font-size: 26rpx;
			color: #999999;
		}
		.wc{
			color: #24BB3D;
		}
	}
}

.hleft {
	position: absolute;
	left: 10px;
	font-size: 35rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #FFFFFF;
}

.nodata {
	width: 100%;
	padding-top: 30rpx;
}

.meiyuan {
	font-size: 35rpx;
	position: relative;
	top: -1px;
}

.meiyuantwo {
	font-size: 22rpx;
	position: relative;
	top: -1px;
}
.jli{
	// height: 821rpx;
	background: linear-gradient(90deg, #FF8F39, #FF4D43);
	// padding-top: var(--status-bar-height);
	padding:0 30rpx 120rpx;
	.jname{
		font-weight: 800;
		font-size: 45rpx;
		color: #FFFFFF;
		padding-top: 20rpx;
		display: block;
		margin-bottom: 30rpx;
	}
	.yaojl{
		font-weight: 400;
		font-size: 30rpx;
		color: #FFFFFF;
	}
	.yaonav{
		position: relative;
		width: 100%;
		height: 500rpx;
		display: flex;
		flex-direction: column;
		justify-content: end;
		.img_jlbj{
			position: absolute;
			width: 100%;
			height: 100%;
		}
		.yitem{
			position: relative;
			width: 100%;
			height: 62%;
			padding: 30rpx;
			display: flex;
			flex-direction: column;
			margin-top: auto;
			.yione{
				display: flex;
				flex-direction: row;
				.yileft{
					display: flex;
					flex-direction: column;
					flex: 1;
				}
				.yibt{
					display: flex;
					flex-direction: row;
					align-items: center;
					.keti{
						font-weight: 500;
						font-size: 26rpx;
						color: #1A1A1A;
					}
					.tixian{
						background: #FFDFE3;
						border-radius: 22rpx;
						padding: 5rpx 20rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #FE3967;
						margin-left: 10rpx;
					}
					.icon_ck{
						width: 24rpx;
						margin-left: 8rpx;
						height: 24rpx;
					}
				}
				.yuan{
					font-weight: 500;
					font-size: 26rpx;
					color: #FF4E43;
					display: block;
					margin-top: 15rpx;
				}
				.yprice{
					font-weight: bold;
					font-size: 60rpx;
					color: #FF4E43;
					position: relative;
					top: 4rpx;
					margin-right: 4rpx;
				}
			}
			.yitwo{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				margin-top: auto;
				.yileft{
					width: 46%;
					height: 78rpx;
					background: linear-gradient(90deg, #FF8F39, #FF4D43);
					border-radius: 39rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: bold;
					font-size: 28rpx;
					color: #FFFFFF;
				}
			}

		}
	}
}
.immerse {
	width: 100%;
	height: calc(var(--status-bar-height) + env(safe-area-inset-top));
	// background-color: #fff;
	// #ifdef MP-WEIXIN
	height: calc(var(--status-bar-height));
	// #endif
	z-index: 1007500000;
	position: relative;
}
</style>
